<template>
  <!-- 条款库 -->
  <el-collapse accordion>
    <el-collapse-item
      v-for="(clauses, index) of list"
      :key="'clauses-' + index"
      :title="clauses.text"
    >
      <template v-if="!!(clauses.children) && clauses.children.length">
        <draggable
          :list="clauses.children"
          :group="{ name: 'clause', pull: 'clone', put: false }"
          :clone="clauseClone"
        >
          <p
            v-for="(clause, clauseInx) of clauses.children"
            :key="'clause-' + clauseInx"
            class="text-multi-ellipsis--l3"
            :title="clause.text"
          >
            {{clauseInx + 1}}. {{clause.text}}
          </p>
        </draggable>
      </template>
      <template v-else>
        <p class="text-center color-gray">暂无条款</p>
      </template>
    </el-collapse-item>
  </el-collapse>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  name: 'Clauses',
  components: {draggable},
  props: {list: Array, default: () => ([])},
  methods: {
    clauseClone(data) {
      let clause = {...data};
      return clause;
    }
  }
};
</script>
